<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">       
    <title><%= title %></title>
  
    <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/stylesheets/signin.css" />
  </head>

  <body>

    <div id="container" class="container">
       <% if (locals.success) { %> 
          <div id="alt_sucess" class="alert alert-success"> 
            <%- success %> 
          </div> 
       <% } %> 

      <% if (locals.error) { %> 
        <div id="alt_warning" class="alert alert-warning"> 
          <%= error %> 
        </div> 
      <% } %> 

      <form class="form-signin" role="form" method="post">
        <h2 class="form-signin-heading">注册</h2>
        <% if(url) { %>
            <div class="form-img">
                <img src='<%= url %>' alt="" class="img-responsive" />
            </div>
            
        <% }  else { %>
            <a class="btn btn-link" href="/upload" role="button">上传照片</a>
        <% } %> 
        <input id="txtUserName" name="txtUserName" type="text" class="form-control" placeholder="用户名" required autofocus />
        <input id="txtUserPwd" name="txtUserPwd" type="password" class="form-control" placeholder="密码" required/>
        <input id="txtUserRePwd"  name="txtUserRePwd" type="password" class="form-control" placeholder="重复密码" required/>   

        <button id="btnSub" class="btn btn-lg btn-primary" type="submit">注  册</button>
        <a class="btn btn-link" href="/login" role="button">登  录</a>
      </form>  
      
    </div> 
  </body>
</html>

<script src="/javascripts/jquery-1.11.0.min.js" type="text/javascript"></script>

<script type="text/javascript">
     String.prototype.format = function (args) {
            var result = this;
            if (arguments.length > 0) {
                if (arguments.length == 1 && typeof (args) == "object") {
                    for (var key in args) {
                        if (args[key] != undefined) {
                            var reg = new RegExp("({" + key + "})", "g");
                            result = result.replace(reg, args[key]);
                        }
                    }
                }
                else {
                    for (var i = 0; i < arguments.length; i++) {
                        if (arguments[i] != undefined) {
                            var reg = new RegExp("({)" + i + "(})", "g");
                            result = result.replace(reg, arguments[i]);
                        }
                    }
                }
            }
            return result;
    }

    $(function(){
        $('#btnSub').on('click',function(){
            var 
            $txtUserName = $('#txtUserName'),
            txtUserNameVal = $.trim($txtUserName.val()),            
            $txtUserPwd = $('#txtUserPwd'),
            txtUserPwdVal = $.trim($txtUserPwd.val()),
            $txtUserRePwd = $('#txtUserRePwd'),
            txtUserRePwdVal = $.trim($txtUserRePwd.val()),
            errorTip = '<div id="errorTip" class="alert alert-warning">{0}</div> ';

            $("#errorTip,#alt_sucess,#alt_warning").remove();
            
            if(txtUserNameVal.length == 0)
            {
                $("#container").prepend(errorTip.format('用户名不能为空'));                
                $txtUserName.focus();
                return false;
            }

            if(txtUserPwdVal.length == 0)
            {                
                $("#container").prepend(errorTip.format('密码不能为空'));
                $txtUserPwd.focus();
                return false;
            }

            if(txtUserRePwdVal.length == 0)
            {
                $("#container").prepend(errorTip.format('重复密码不能为空'));                
                $txtUserRePwd.focus();
                return false;
            }

            if(txtUserPwdVal != txtUserRePwdVal)
            {                 
                 $("#container").prepend(errorTip.format('两次密码不一致'));      
                 $txtUserPwd.focus();
                 return false;
            }

            

            return true;
        })
    });

</script>